<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>宝鸡市残疾人服务平台</title>
    <link rel="stylesheet" href="train.css">
</head>
<body>
    <div class="nav-box"> 
        <ul>
            <li>
                <div class="nav-block">
                    <a href="shouye.html"><i class="icon home"></i><span style="color: rgb(255, 255, 255)">系统首页</span></a>
                </div>
            </li>
           
           
            <li>
                <div class="nav-block on two">
                    <i class="icon order"></i><span>招聘信息</span>
                    <i class="arrow"></i>
                </div>
                <ul class="nav-two">
                    <a href="job.html" ><li><span style="color: white">工作岗位</span></li></a>
                    <a href="consequence.html"><li><span style="color: white">面试结果</span></li></a>
                </ul>
            </li>
            <li>
                <div class="nav-block on two">
                    <i class="icon order"></i><span>相关服务</span>
                    <i class="arrow"></i>
                </div>
                <ul class="nav-two">
                    <a href="explain.html"><li><span style="color: white">器械说明</span></li></a>
                    <a href="shopping.html"><li><span style="color: white">商城</span></li></a>
                </ul>
            </li> 
            <li>
                <div class="nav-block">
                    <a href="train.html"><i class="icon user"></i><span style="color: rgb(255, 255, 255)">技术培训</span></a>
                
                </div>
               
            </li>
            <li>
                <div class="nav-block on two">
                    <i class="icon order"></i><span>个人中心</span>
                    
                    <i class="arrow"></i>
                </div>
                <ul class="nav-two">
                    <a href="cjr.html"><li><span style="color: white">修改密码</span></li></a>
                    <a href="my.html"><li><span style="color: white">个人信息</span></li></a>
                    <a href="vital.html"><li><span style="color: white">个人简历</span></li></a>
                    
                </ul>
            </li>
           
        </ul>
    </div>
    <div>
        <div class="header"><h1>宝鸡市残疾人服务平台</h1></div>
        <div class="return">
            <a href="">退出登录</a>
        </div>
    </div>
    <div></div>
    <script>
        let nav=document.querySelector(".nav-box");
        nav.addEventListener("click",function(ev){
            if(ev.target.className.indexOf("two")>=0){
                ev.target.classList.toggle("on")
            }else if(ev.target.parentNode.className.indexOf("two")>=0){
                ev.target.parentNode.classList.toggle("on")
            }
        });
    </script>
       <nav class="sidebar">...</nav>
       <!-- 主内容区 -->
       <main>
        <!-- 课程模块 -->
        <article class="course-card" 
                 tabindex="0"
                 aria-labelledby="course1-title">
            <div class="sign-language">
                <video controls aria-describedby="sign-desc">
                    <source src="sign-language.mp4" type="video/mp4">
                    <track kind="captions" src="captions_zh.vtt" srclang="zh" label="中文">
                </video>
                <div id="sign-desc" hidden>
                    手语老师演示本课程核心要点
                </div>
            </div>
            <h2 id="course1-title" class="course-title">
                <span role="img" aria-hidden="true">👩💻</span>
                数字技能（编程、电商运营）培训
            </h2>
            
            <div class="course-content">
                <p>本课程包含以下辅助学习功能：</p>
                <ul aria-label="课程特色">
                    <li>屏幕阅读器兼容模式</li>
                    <li>语音交互代码练习</li>
                    <li>高对比度开发环境配置</li>
                </ul>
            </div>
            <button class="enroll-button"
                    aria-label="报名数字技能培训课程"
                    onclick="handleEnroll('course1')">
                立即报名
            </button>
        </article>
        <!-- 更多课程... -->
         <!-- 课程模块 -->
        <article class="course-card" 
        tabindex="0"
        aria-labelledby="course1-title">
   <div class="sign-language">
       <video controls aria-describedby="sign-desc">
           <source src="sign-language.mp4" type="video/mp4">
           <track kind="captions" src="captions_zh.vtt" srclang="zh" label="中文">
       </video>
       <div id="sign-desc" hidden>
           手语老师演示本课程核心要点
       </div>
   </div>
   <h2 id="course1-title" class="course-title">
       <span role="img" aria-hidden="true">👩💻</span>
       手工艺制作培训
   </h2>
   
   <div class="course-content">
       <p>本课程包含以下辅助学习功能：</p>
       <ul aria-label="课程特色">
           <li>屏幕阅读器兼容模式</li>
           <li>语音交互代码练习</li>
           <li>高对比度开发环境配置</li>
       </ul>
   </div>
   <button class="enroll-button"
           aria-label="报名手工艺制作课程"
           onclick="handleEnroll('course2')">
       立即报名
   </button>
</article>
    </main>   
</body>
</html>